<template>
<div class="container">
    <div class="div1">
        <!-- 可领优惠券· -->
        <div class="canTicket" @click="btnClick($event,1)" :class="{activeClass:fontColor1}">可领优惠券</div>
        <!-- 不可领优惠券 -->
        <div class="cantTicket" @click="btnClick($event,2)" :class="{activeClass:fontColor2}">我的优惠券</div>
    </div>
    <div class="div2">
        <ticket-list :isShow="isShow"></ticket-list>
    </div>
</div>
</template>

<script>
// 引入优惠券列表模块
import TicketList from './ticketList'
export default {
    name: "ticketTopic",
    components: {
        TicketList,
    },
    data() {
        return {
            fontColor1: false,
            fontColor2: false,
            isShow: false,

        }
    },
    methods: {
        // 函数判断点击是哪个dom元素,是点击了可领优惠券还是我的优惠券
        btnClick(e, dom) {
            console.log(dom);
            if (dom == 1) {
                // 将要传递的值变为假,以便子元素接受到传递的值,我的优惠券下面的部分进行隐藏
                this.isShow = false;
                // 下面的部分主要是为了绑定的class的样式,根据点击的元素的不同,进行样式的设置
                this.fontColor1 = true;
                this.fontColor2 = false;
            } else {
                // 目的同上
                this.isShow = true;
                this.fontColor2 = true;
                this.fontColor1 = false;
            }
        
        }
    },

}
</script>

<style scoped>
.container {
    width: 100%;
}

.div1 {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    font-size: .4rem;
    justify-content: space-around;
    align-items: center;
    height: 1.2rem;
    border-bottom: 1px solid #eee;
}

.activeClass {
    color: #4AA4FC;
    font-weight: 900;
}
</style>
